<template>
  <div class="container">
    <!-- 头部学科名称 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      size="small "
    >
      <el-form-item label="学科名称">
        <el-input v-model="formInline.user"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="cleaer">清除</el-button>
        <el-button type="primary" @click="loadList" size="small"
          >搜索</el-button
        >
      </el-form-item>
      <el-button
        type="success"
        icon="el-icon-edit"
        class="fr"
        size="small"
        @click="dialogFormVisible = true"
        >新增学科</el-button
      >
    </el-form>
    <!-- 头部结束 -->
    <!-- 新增学科弹框 -->
    <el-dialog title="新增学科" :visible.sync="dialogFormVisible" width="30%">
      <el-form>
        <el-form-item label="学科名称" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入学科名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示" :label-width="formLabelWidth">
          <el-switch v-model="value" active-color="#13ce66"> </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDirectorys">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 文字提示 -->
    <el-alert :title="alertText" type="info" show-icon> </el-alert>
    <!-- / 文字提示 -->
    <!-- 表格 -->
    <el-table :data="subjects" style="width: 100%;margin-top: 10px">
      <el-table-column type="index" label="序号" width="50"> </el-table-column>

      <el-table-column label="学科名称" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.subjectName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建者" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="165">
        <template slot-scope="scope">
          <span>{{ scope.row.addDate | parseTimeByString }}</span>
        </template>
      </el-table-column>
      <el-table-column label="前台是否显示" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.isFrontDisplay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="二级目录" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.twoLevelDirectory }}</span>
        </template>
      </el-table-column>

      <el-table-column label="标签" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.tags }}</span>
        </template>
      </el-table-column>

      <el-table-column label="题目数量" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.totals }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="
              $router.push(
                `directorys?id=${scope.row.id}&name=${encodeURIComponent(
                  scope.row.subjectName
                )}`
              )
            "
          >
            学科分类
          </el-button>
          <el-button
            type="text"
            @click="
              $router.push(
                `tags?id=${scope.row.id}&name=${encodeURIComponent(
                  scope.row.subjectName
                )}`
              )
            "
          >
            学科标签
          </el-button>
          <el-button type="text" @click="amend(scope.row)">
            修改
          </el-button>
          <el-button @click="deleteRow(scope.row.id)" type="text">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- / 表格 -->

    <!-- 分页 -->
    <div class="pagination">
      <div class="pages">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="requestParameters.page"
          :total="total"
          :page-size="this.requestParameters.pagesize"
          :page-sizes="[5, 10, 20, 30]"
          layout="sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </div>
    <!-- /分页 -->

    <!-- 修改学科弹框 -->
    <el-dialog title="修改学科" :visible.sync="dialogVisible" width="30%">
      <el-form>
        <!-- isFrontDisplay: 1 -->
        <!-- subjectName -->
        <el-form-item label="学科名称" :label-width="formLabelWidth">
          <el-input
            v-model="lineDate.subjectName"
            autocomplete="off"
            :placeholder="form.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示" :label-width="formLabelWidth">
          <el-switch
            v-model="lineDate.isFrontDisplay"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAmend()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 子组件 -->
    <!-- <subjects-add ref="mychild" :formBase="subjects" v-on:newDataes="loadList"></subjects-add > -->
    <!--  :titleInfo="titleInfo" :formBase="subjects" v-on:newDataes="getList" -->
  </div>
</template>

<script>
//  先加载请求数据的方法
import { list, add, remove, update } from '@/api/hmmm/subjects'
export default {
  name: 'Subject',
  //   components: {
  //   subjectsAdd
  // },
  data() {
    return {
      lineDate: {},
      dialogVisible: false,
      formInline: {
        user: ''
      },
      // 分页
      requestParameters: {
        //  当前的页数
        page: 1,
        //  当前每页显示多少条数据
        pagesize: 10
      },
      // subjectName: this.formInline.user,
      // 学科名称
      total: 0,
      alertText: '',
      //  学科列表
      subjects: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '70px',
      value: true,
      // currId: {}
      //  查询到的用户信息对象
      editForm: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    this.loadList()
  },
  mounted() {},
  methods: {
    // 删除
    deleteRow(id) {
      // rows.splice(index, 1),
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: id })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.subjects.splice(id, 1)
              this.loadList(this.requestParameters)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 分页
    //  监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize);
      this.requestParameters.pagesize = newSize
      this.loadList()
    },
    //  监听页码值改变
    handleCurrentChange(newPage) {
      this.requestParameters.page = newPage
      this.loadList()
    },
    // 请求页面数据
    async loadList(params) {
      try {
        const { data } = await list({
          page: this.requestParameters.page,
          pagesize: this.requestParameters.pagesize,
          subjectName: this.formInline.user
        })
        this.subjects = data.items
        this.total = data.counts
        this.alertText = `共 ${this.total} 条记录`
      } catch (err) {
        return this.$message.error('获取用户列表失败')
      }
    },
    //  新增学科
    async addDirectorys() {
      this.dialogFormVisible = false
      try {
        await add({
          subjectName: this.form.name, // 学科名称
          isFrontDisplay: this.value // 是否在页面显示 1是 0否
        })
        this.subjects.unshift(this.form.name)
        this.form.name = ''
        this.loadList()
      } catch (err) {
        console.log('添加失败', err)
      }
    },
    cleaer() {
      this.formInline.user = ''
      this.loadList()
    },
    //   点击修改弹框
    async amend(row) {
      this.dialogVisible = true
      // this.$refs.mychild.dialogForm()
      // console.log(row)

      this.lineDate = row
    },
    //  修改学科
    async addAmend(lineDate) {
      try {
        await update({
          id: this.lineDate.id,
          isFrontDisplay: this.lineDate.isFrontDisplay,
          subjectName: this.lineDate.subjectName
        })
        //   关闭对话框
        this.dialogVisible = false
        //  刷新数据列表
        this.loadList()
        //   提示修改成功
        this.$message.success('更新用户信息成功!')
      } catch (err) {
        return this.$message.error('更新用户信息失败!')
      }
    }
  }
}
</script>

<style scoped lang="less">
el-button {
  border-radius: 3px;
}
.container {
  margin: 3px;
  padding: 20px;
  background-color: #fff;
  overflow: hidden;
  el-form-item {
    el-input {
      height: 32px;
    }
  }
  .fr {
    float: right;
  }
  .pagination {
    // margin-left: 600px;
    float: right;
    padding-top: 10px;
  }
}
</style>
